<template>
  <ul>
    <li
      @click="clickbox(index)"
      v-for="(item, index) in bom"
      :key="item.id"
      :class="Lindex == index ? 'active' : ''"
    >
      {{ item.name }}
    </li>
  </ul>
</template>
<script>
export default {
    data(){
        return {
            Lindex:0,
            bom:[
                {id:1,name:'首页'},
                {id:2,name:'订单'},
                {id:3,name:'我的'},
            ]
        }
    },
    methods:{
        clickbox(index){
            this.Lindex = index
        }
    }
}
</script>

<style scoped>
ul {
  height: 30px;
  width: 90%;
  position: fixed;
  bottom: 0;
  display: flex;
  text-align: center;
  justify-content: space-between;
  padding: 20px 10px;
  list-style: none;
  background-color: white;

}
ul li {
  padding: 10px;
  height: 100%;
  background-color: white;
}
ul li.active {
  color: chocolate;
}
</style>
